<template>
	<view class="container">
		<cu-custom isBack isFixed bgColor="bg-transparent">
			<block slot="content">订单详情</block>
		</cu-custom>
		<view class="banner-bg" :style="{ paddingTop: CustomBar + 'px' }">
			<!-- <image class="icon" src="/static/img/none.png" mode="widthFix"></image> -->
		</view>
		<view class="order-steps">
			<view class="flex align-start">
				<view class="step-icon unshrink"></view>
				<view class="flex-sub margin-left-sm">
					<view class="flex justify-between">
						<text>订单创建</text>
						<text class="text-gray">{{detail.createtime_text}}</text>
					</view>
					<view class="margin-top-sm text-gray">将为您尽快匹配专业的店长，请稍后</view>
				</view>
			</view>
			<block v-if="detail.receivetime">
				<block v-if="isShow">
					<view class="flex align-start margin-top">
						<view class="step-icon unshrink"></view>
						<view class="flex-sub margin-left-sm">
							<view class="flex justify-between">
								<text>订单完成</text>
								<text class="text-gray">{{$tools.timeFormat(detail.receivetime, 'yyyy-mm-dd hh:MM:ss')}}</text>
							</view>
							<view class="margin-top-sm text-gray">福筑家来为您服务</view>
						</view>
					</view>				
				</block>
				<view v-if="!isShow" 
					class="flex align-center justify-center margin-top text-green text-bold" 
					@tap="toggleShow">
					查看全部
					<uni-icons type="down" color="rgb(0, 123, 70)" size="16"></uni-icons>
				</view>
				<view v-else 
					class="flex align-center justify-center margin-top text-green text-bold"
					@tap="toggleShow">
					收起
					<uni-icons type="up" color="rgb(0, 123, 70)" size="16"></uni-icons>
				</view>				
			</block>
		</view>
		<view v-if="detail.id" class="bg-white margin padding radius-sm">
			<view class="title">服务信息</view>
			<block>
				<view v-if="detail.goods_id==1" class="info-item">
					<text class="text-gray unshrink margin-right">服务项目</text>
					<text class="flex-sub text-right">局部改造</text>
				</view>
				<view v-else-if="detail.goods_id==2" class="info-item">
					<text class="text-gray unshrink margin-right">服务项目</text>
					<text class="flex-sub text-right">防水补漏</text>
				</view>
				<view v-else-if="detail.goods_id==3" class="info-item">
					<text class="text-gray unshrink margin-right">服务项目</text>
					<text class="flex-sub text-right">墙面翻新</text>
				</view>
				<view v-else-if="detail.goods_id==4" class="info-item">
					<text class="text-gray unshrink margin-right">服务项目</text>
					<text class="flex-sub text-right">维修安装</text>
				</view>
				<view v-else class="order-item">
					<text class="text-gray unshrink margin-right">服务项目</text>
					<text class="flex-sub text-right">{{detail.order_goods[0]&&detail.order_goods[0].name}}</text>
				</view>				
			</block>
			<block>
				<view v-if="detail.status=='wait'" class="info-item">
					<text class="text-gray unshrink margin-right">订单状态</text>
					<text class="flex-sub text-right">已预约</text>
				</view>
				<view v-else-if="detail.status=='complete'" class="info-item">
					<text class="text-gray unshrink margin-right">订单状态</text>
					<text class="flex-sub text-right">已完成</text>
				</view>
				<view v-else-if="detail.status=='cancel'" class="info-item">
					<text class="text-gray unshrink margin-right">订单状态</text>
					<text class="flex-sub text-right">已取消</text>
				</view>				
			</block>
			<view class="info-item">
				<text class="text-gray unshrink margin-right">联系人</text>
				<text class="flex-sub text-right">{{detail.name}}</text>
			</view>
			<view class="info-item">
				<text class="text-gray unshrink margin-right">联系电话</text>
				<text class="flex-sub text-right">{{detail.mobile}}</text>
			</view>
			<view class="info-item">
				<text class="text-gray unshrink margin-right">服务地址</text>
				<text class="flex-sub text-right">{{detail.address}}</text>
			</view>
			<view class="info-item">
				<text class="text-gray unshrink margin-right">订单编号</text>
				<text class="flex-sub text-right">{{detail.no}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				detail: {},
				isShow: false,
			}
		},
		onLoad(options) {
			let detail = JSON.parse(decodeURIComponent(options.order))
			if(detail.id) {
				this.detail = detail
				console.log(this.detail)
			}
		},
		methods: {
			toggleShow() {
				this.isShow = !this.isShow
			}
		}
	}
</script>

<style scoped>
	.banner-bg {
		position: relative;
		background-color: rgb(0, 123, 70);
		height: 400rpx;
		border-radius: 0 0 60rpx 60rpx;
	}
	.banner-bg .icon {
		position: absolute;
		width: 200rpx;
		height: auto;
		left: 72rpx;
		bottom: 100rpx;
	}
	.order-steps {
		position: relative;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		margin: -120rpx 30rpx 30rpx;
		z-index: 99;
	}
	.step-icon {
		position: relative;
		margin-top: 6rpx;
		width: 24rpx;
		height: 24rpx;
		background-color: rgba(0, 123, 70, .3);
		border-radius: 50%;
	}
	.step-icon::after {
		content: "";
		display: block;
		position: absolute;
		width: 14rpx;
		height: 14rpx;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background-color: rgb(0, 123, 70);
		border-radius: 50%;
	}
	
	.title {
		position: relative;
		font-size: 32rpx;
		padding-left: 20rpx;
	}
	.title::after {
		content: "";
		display: block;
		position: absolute;
		width: 4rpx;
		top: 0;
		bottom: 0;
		left: 0;
		background-color: rgb(0, 123, 70);
	}
	
	.info-item {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}
	.info-item>text {
		min-width: 120rpx;
	}
</style>